Vue.component('Diagram', {
    template: `
		<el-dialog title="查看关系图" width="600px" class="icon-dialog" :visible.sync="show" @open="open" :before-close="close" append-to-body>
          <div class="tree" ref="tree" id="tree"></div>
        </el-dialog>
	`
    ,
    props: {
        show: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: 'small'
        },
    },
    data(){
        return {
            json:[
                {
                    "name": "张三",
                    "parent": "null",
                    "children": [
                        {
                            "name": "李四",
                            "parent": "张三",
                            "children": [
                                {
                                    "name": "王五",
                                    "parent": "李四",
                                    "children": [
                                        {"name": "程六","parent": "王五" },
                                        {"name": "王八","parent": "王五" },
                                        {"name": "王七","parent": "王五" },
                                        {
                                            "name": "王九",
                                            "parent": "王五",
                                            "children":[
                                                {"name": "王十","parent": "王五" },
                                                {"name": "王十一","parent": "王五" },
                                                {"name": "王十二","parent": "王五" },
                                                {"name": "王十三","parent": "王五" },
                                                {"name": "王十四","parent": "王五" },
                                                {
                                                    "name": "程五",
                                                    "parent": "王五",
                                                    "children":[
                                                        {"name": "程六","parent": "程五" },
                                                        {"name": "程七","parent": "程五" },
                                                        {"name": "程八","parent": "程五" },
                                                        {"name": "小张","parent": "小红" },
                                                        {"name": "小王","parent": "小红" },
                                                        {"name": "小程","parent": "小红" },
                                                        {"name": "小陈","parent": "小红" },
                                                        {"name": "小明","parent": "小红" },
                                                        {"name": "小张","parent": "小红" },
                                                        {"name": "小王","parent": "小红" },
                                                        {"name": "小程","parent": "小红" },
                                                        {"name": "小陈","parent": "小红" },
                                                        {"name": "小明","parent": "小红" },
                                                        {"name": "小张","parent": "小红" },
                                                        {"name": "小王","parent": "小红" },
                                                        {"name": "小程","parent": "小红" },
                                                        {"name": "小陈","parent": "小红" },
                                                        {"name": "小明","parent": "小红" },
                                                        {"name": "小张","parent": "小红" },
                                                        {"name": "小王","parent": "小红" },
                                                        {"name": "小程","parent": "小红" },
                                                        {"name": "小陈","parent": "小红" },
                                                        {"name": "程九","parent": "程五" },
                                                        {
                                                            "name": "程十",
                                                            "parent": "程五",
                                                            "children":[
                                                                {"name": "程十一","parent": "程十" },
                                                                {"name": "程十二","parent": "程十" },
                                                                {"name": "程十三","parent": "程十" },
                                                                {"name": "小张","parent": "小红" },
                                                                {"name": "小王","parent": "小红" },
                                                                {"name": "小程","parent": "小红" },
                                                                {"name": "小陈","parent": "小红" },
                                                                {"name": "小明","parent": "小红" },
                                                                {"name": "小张","parent": "小红" },
                                                                {"name": "小王","parent": "小红" },
                                                                {"name": "小程","parent": "小红" },
                                                                {"name": "小陈","parent": "小红" },
                                                                {"name": "小明","parent": "小红" },
                                                                {"name": "小张","parent": "小红" },
                                                                {"name": "小王","parent": "小红" },
                                                                {"name": "小程","parent": "小红" },
                                                                {"name": "小陈","parent": "小红" },
                                                                {"name": "小明","parent": "小红" },
                                                                {"name": "小张","parent": "小红" },
                                                                {"name": "小王","parent": "小红" },
                                                                {"name": "小程","parent": "小红" },
                                                                {"name": "小陈","parent": "小红" },
                                                            ]
                                                        },
                                                    ]
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "name": "马一",
                                    "parent": "李四",
                                    "children":[
                                        {"name": "马二","parent": "马一" },
                                        {"name": "马三","parent": "马一" },
                                        {"name": "马四","parent": "马一" },
                                        {"name": "马五","parent": "马一" },
                                        {"name": "马六","parent": "马一" },
                                        {"name": "马七","parent": "马一" },
                                        {"name": "小明","parent": "小红" },
                                        {"name": "小张","parent": "小红" },
                                        {"name": "小王","parent": "小红" },
                                        {"name": "小程","parent": "小红" },
                                        {"name": "小陈","parent": "小红" },
                                        {"name": "小明","parent": "小红" },
                                        {"name": "小张","parent": "小红" },
                                        {"name": "小王","parent": "小红" },
                                        {"name": "小程","parent": "小红" },
                                        {"name": "小陈","parent": "小红" },
                                        {"name": "小张","parent": "小红" },
                                        {"name": "小王","parent": "小红" },
                                        {"name": "小程","parent": "小红" },
                                        {"name": "小陈","parent": "小红" },
                                        {"name": "小明","parent": "小红" },
                                        {"name": "小张","parent": "小红" },
                                        {"name": "小王","parent": "小红" },
                                        {"name": "小程","parent": "小红" },
                                        {"name": "小陈","parent": "小红" },
                                        {"name": "小明","parent": "小红" },
                                        {"name": "小张","parent": "小红" },
                                        {"name": "小王","parent": "小红" },
                                        {"name": "小程","parent": "小红" },
                                        {"name": "小陈","parent": "小红" },
                                        {"name": "小明","parent": "小红" },
                                        {"name": "小张","parent": "小红" },
                                        {"name": "小王","parent": "小红" },
                                        {"name": "小程","parent": "小红" },
                                        {"name": "小陈","parent": "小红" },
                                        {"name": "小明","parent": "小红" },
                                        {"name": "小张","parent": "小红" },
                                        {"name": "小王","parent": "小红" },
                                        {"name": "小程","parent": "小红" },
                                        {"name": "小陈","parent": "小红" },
                                        {"name": "小明","parent": "小红" },
                                        {"name": "小张","parent": "小红" },
                                        {"name": "小王","parent": "小红" },
                                        {"name": "小程","parent": "小红" },
                                        {"name": "小陈","parent": "小红" },
                                    ]
                                }
                            ]
                        },
                        {
                            "name": "小红",
                            "parent": "张三",
                            "children":[
                                {"name": "小明","parent": "小红" },
                                {"name": "小张","parent": "小红" },
                                {"name": "小王","parent": "小红" },
                                {"name": "小程","parent": "小红" },
                                {"name": "小陈","parent": "小红" },
                                {"name": "小明","parent": "小红" },
                                {"name": "小张","parent": "小红" },
                                {"name": "小王","parent": "小红" },
                                {"name": "小程","parent": "小红" },
                                {"name": "小陈","parent": "小红" },
                                {"name": "小明","parent": "小红" },
                                {"name": "小张","parent": "小红" },
                                {"name": "小王","parent": "小红" },
                                {"name": "小程","parent": "小红" },
                                {"name": "小陈","parent": "小红" },
                                {"name": "小明","parent": "小红" },
                                {"name": "小张","parent": "小红" },
                                {"name": "小王","parent": "小红" },
                                {"name": "小程","parent": "小红" },
                                {"name": "小陈","parent": "小红" },
                                {"name": "小明","parent": "小红" },
                                {"name": "小张","parent": "小红" },
                                {"name": "小王","parent": "小红" },
                                {"name": "小程","parent": "小红" },
                                {"name": "小陈","parent": "小红" },
                                {"name": "小明","parent": "小红" },
                                {"name": "小张","parent": "小红" },
                                {"name": "小王","parent": "小红" },
                                {"name": "小程","parent": "小红" },
                                {"name": "小陈","parent": "小红" },

                            ]
                        }
                    ]
                }
            ],
            loading:false,
            margin:[20, 120, 20, 120],
            width:0,
            height:0,
            i:0,
            duration:750,
            root:[],
            tree:[],
            diagonal:[],
            zoom:[],
            svg:[],
        }
    },
    created() {

    },
    mounted() {
        this.width = 600
        this.height = 500
        this.root = this.json[0]
        this.tree = d3.layout.tree().size([this.height , this.width])
        this.diagonal = d3.svg.diagonal().projection(function(d) { return [d.y, d.x]; })
        this.zoom = d3.behavior.zoom().scaleExtent([0.1, 100]).on("zoom", this.zoom)
                                                                //给svg绑定zoom事件          //给g绑定zoom事件
        this.svg = d3.select("body").select("#tree").append("svg").call(this.zoom).append("g").call(this.zoom).append("g").attr("transform", "translate(" + this.margin[3] + "," + this.margin[0] + ")")

        this.root.x0 = this.height / 2;
        this.root.y0 = 0;
        this.root.children.forEach(this.collapse());
        this.updates(root);
    },
    methods: {
        open(){
        },
        collapse(d){
            if (d.children) {
                d._children = d.children;
                d._children.forEach(this.collapse);
                d.children = null;
            }
        },
        zoomed() {
            this.svg.attr("transform",
                "translate(" + this.zoom.translate() + ")" +
                "scale(" + this.zoom.scale() + ")"
            );
        },
        updates(source) {

            // Compute the new tree layout.
            var nodes = this.tree.nodes(root).reverse(),
                links = this.tree.links(nodes);

            // Normalize for fixed-depth.
            nodes.forEach(function(d) { d.y = d.depth * 180; });

            // Update the nodes…
            var node = this.svg.selectAll("g.node")
                .data(nodes, function(d) { return d.id || (d.id = ++i); });

            // Enter any new nodes at the parent's previous position.
            var nodeEnter = node.enter().append("g")
                .attr("class", "node")
                .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
                .on("click", click);

            nodeEnter.append("circle")
                .attr("r", 1e-6)
                .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

            nodeEnter.append("text")
                .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
                .attr("dy", ".35em")
                .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
                .text(function(d) { return d.name; })
                .style("fill-opacity", 1e-6);

            var nodeUpdate = node.transition()
                .duration(duration)
                .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

            nodeUpdate.select("circle")
                .attr("r", 4.5)
                .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

            nodeUpdate.select("text")
                .style("fill-opacity", 1);

            var nodeExit = node.exit().transition()
                .duration(duration)
                .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
                .remove();

            nodeExit.select("circle")
                .attr("r", 1e-6);

            nodeExit.select("text")
                .style("fill-opacity", 1e-6);

            var link = this.svg.selectAll("path.link")
                .data(links, function(d) { return d.target.id; });

            link.enter().insert("path", "g")
                .attr("class", "link")
                .attr("d", function(d) {
                    var o = {x: source.x0, y: source.y0};
                    return diagonal({source: o, target: o});
                });

            link.transition()
                .duration(duration)
                .attr("d", diagonal);

            link.exit().transition()
                .duration(duration)
                .attr("d", function(d) {
                    var o = {x: source.x, y: source.y};
                    return diagonal({source: o, target: o});
                })
                .remove();

            nodes.forEach(function(d) {
                d.x0 = d.x;
                d.y0 = d.y;
            });
        },
        click(d) {
            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else {
                d.children = d._children;
                d._children = null;
            }
            update(d);
        },

        close(){
            this.$emit('update:show', false)
            this.loading = false
        },



    }


})
